<template>
	<div class="order-manage">
		<el-card>
			<div class="toolbar">
				<el-button type="primary" @click="openForm()">新增订单</el-button>
				<el-button type="danger" :disabled="!multipleSelection.length" @click="batchDelete">批量删除</el-button>
				<el-button @click="exportData">导出数据</el-button>
				<el-input v-model="filters.keyword" placeholder="搜索订单编号/产品" class="search-input" @input="filterOrders"
					clearable />
				<el-select v-model="filters.status" placeholder="订单状态" style="width: 130px" @change="filterOrders"
					clearable>
					<el-option label="全部" value=""></el-option>
					<el-option label="待生产" value="待生产"></el-option>
					<el-option label="生产中" value="生产中"></el-option>
					<el-option label="已完成" value="已完成"></el-option>
				</el-select>
			</div>
			<el-table :data="filteredOrders" border highlight-current-row style="margin-top: 18px"
				@selection-change="handleSelectionChange">
				<el-table-column type="selection" width="50"></el-table-column>
				<el-table-column prop="orderNo" label="订单编号" width="140" />
				<el-table-column prop="product" label="产品名称" width="160" />
				<el-table-column prop="quantity" label="数量" width="80" />
				<el-table-column prop="status" label="订单状态" width="100">
					<template #default="scope">
						<el-tag :type="statusTagType(scope.row.status)">{{ scope.row.status }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="customer" label="客户" width="120" />
				<el-table-column prop="orderDate" label="下单日期" width="120" />
				<el-table-column label="操作" fixed="right" width="200">
					<template #default="scope">
						<el-button type="primary" size="small" @click="goDetail(scope.row)">详情</el-button>
						<el-button type="success" size="small" @click="openForm(scope.row)">编辑</el-button>
						<el-button type="danger" size="small" @click="deleteOrder(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<!-- 新增/编辑弹窗 -->
		<order-form v-model:visible="showForm" :editData="editOrder" @save="handleSave" />
	</div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
import OrderForm from './OrderForm.vue'

// 本地模拟数据
const initialOrders = [
	{ id: 1, orderNo: 'ORD2024060101', product: '注射用头孢曲松钠', quantity: 500, status: '待生产', customer: '华西药业', orderDate: '2024-06-01' },
	{ id: 2, orderNo: 'ORD2024060102', product: '葡萄糖注射液', quantity: 1200, status: '生产中', customer: '济民制药', orderDate: '2024-06-01' },
	{ id: 3, orderNo: 'ORD2024060103', product: '氯化钠注射液', quantity: 2000, status: '已完成', customer: '百洋药业', orderDate: '2024-06-01' },
	{ id: 4, orderNo: 'ORD2024060201', product: '阿莫西林胶囊', quantity: 1000, status: '待生产', customer: '国控广州', orderDate: '2024-06-02' },
	{ id: 5, orderNo: 'ORD2024060202', product: '维生素C片', quantity: 3000, status: '已完成', customer: '山东罗欣', orderDate: '2024-06-02' },
	{ id: 6, orderNo: 'ORD2024060203', product: '地塞米松磷酸钠注射液', quantity: 650, status: '生产中', customer: '广州医药集团', orderDate: '2024-06-02' },
	{ id: 7, orderNo: 'ORD2024060301', product: '硫酸庆大霉素注射液', quantity: 800, status: '待生产', customer: '太极集团', orderDate: '2024-06-03' },
	{ id: 8, orderNo: 'ORD2024060302', product: '阿奇霉素片', quantity: 700, status: '已完成', customer: '复星医药', orderDate: '2024-06-03' },
	{ id: 9, orderNo: 'ORD2024060303', product: '氢氯噻嗪片', quantity: 1100, status: '生产中', customer: '正大天晴', orderDate: '2024-06-03' },
	{ id: 10, orderNo: 'ORD2024060401', product: '头孢呋辛酯片', quantity: 950, status: '已完成', customer: '华润三九', orderDate: '2024-06-04' },
	{ id: 11, orderNo: 'ORD2024060402', product: '布洛芬缓释胶囊', quantity: 1300, status: '待生产', customer: '扬子江药业', orderDate: '2024-06-04' },
	{ id: 12, orderNo: 'ORD2024060403', product: '甲硝唑片', quantity: 900, status: '已完成', customer: '江苏恒瑞', orderDate: '2024-06-04' },
	{ id: 13, orderNo: 'ORD2024060501', product: '氯雷他定片', quantity: 600, status: '生产中', customer: '北京同仁堂', orderDate: '2024-06-05' },
	{ id: 14, orderNo: 'ORD2024060502', product: '碳酸氢钠注射液', quantity: 1550, status: '待生产', customer: '石药集团', orderDate: '2024-06-05' },
	{ id: 15, orderNo: 'ORD2024060503', product: '多潘立酮片', quantity: 800, status: '生产中', customer: '云南白药', orderDate: '2024-06-05' }
]


const orders = ref([...initialOrders])
const filters = ref({ keyword: '', status: '' })
const filteredOrders = computed(() => {
	return orders.value.filter(order => {
		const matchKeyword =
			!filters.value.keyword ||
			order.orderNo.includes(filters.value.keyword) ||
			order.product.includes(filters.value.keyword)
		const matchStatus = !filters.value.status || order.status === filters.value.status
		return matchKeyword && matchStatus
	})
})
const multipleSelection = ref([])

function statusTagType(status) {
	return status === '已完成'
		? 'success'
		: status === '生产中'
			? 'warning'
			: status === '待生产'
				? 'info'
				: ''
}

// 筛选
function filterOrders() {
	// 直接依赖 computed filteredOrders
}

// 多选
function handleSelectionChange(val) {
	multipleSelection.value = val
}

// 新增/编辑弹窗
const showForm = ref(false)
const editOrder = ref(null)
function openForm(row) {
	editOrder.value = row ? { ...row } : null
	showForm.value = true
}

// 保存（新增/编辑）
function handleSave(order) {
	if (order.id) {
		const idx = orders.value.findIndex(o => o.id === order.id)
		if (idx !== -1) orders.value[idx] = { ...order }
		ElMessage.success('订单已更新')
	} else {
		order.id = Date.now()
		orders.value.push({ ...order })
		ElMessage.success('订单已新增')
	}
	showForm.value = false
}

// 单条删除
function deleteOrder(row) {
	ElMessageBox.confirm('确定删除该订单？', '提示', { type: 'warning' }).then(() => {
		orders.value = orders.value.filter(o => o.id !== row.id)
		ElMessage.success('已删除')
	})
}

// 批量删除
function batchDelete() {
	ElMessageBox.confirm('确定批量删除选中的订单？', '警告', { type: 'warning' }).then(() => {
		const ids = multipleSelection.value.map(o => o.id)
		orders.value = orders.value.filter(o => !ids.includes(o.id))
		ElMessage.success('批量删除成功')
	})
}

// 导出
function exportData() {
	const data = filteredOrders.value.map(({ id, ...rest }) => rest)
	const csvContent = 'data:text/csv;charset=utf-8,' +
		[
			'订单编号,产品名称,数量,订单状态,客户,下单日期',
			...data.map(row =>
				[row.orderNo, row.product, row.quantity, row.status, row.customer, row.orderDate].join(',')
			)
		].join('\n')
	const link = document.createElement('a')
	link.href = encodeURI(csvContent)
	link.download = '订单数据.csv'
	link.click()
}

// 详情跳转
const router = useRouter()
function goDetail(row) {
	router.push({ name: 'OrderDetail', params: { id: row.id } })
}
</script>

<style scoped>
.order-manage {
	padding: 20px;
}

.toolbar {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}

.search-input {
	width: 210px;
}
</style>
  
